<template>
    <!-- 商户类型认证页面 -->
    <view>
        <up-navbar placeholder="true" title="商家注册" :autoBack="true" bgColor="rgba(255,255,255,0)"></up-navbar>
        <image src="@/static/images/img/sgbg.png" class="w-[100%] h-[40vh] z-[-1] absolute top-0"></image>
        <view class="mx-[32rpx] w-[686rpx] h-[180rpx] mt-[57rpx] flex items-center justify-around bg-[#FDF8E9]">
            <view class="w-[112rpx] h-[116rpx] flex flex-col items-center justify-center">
                <view class="text-[48rpx] font-[900] text-center font-[D-DIN-PRO-ExtraBold]">01</view>
                <view class="font-[500] text-[28rpx] text-[#000000] text-center">基本信息</view>
            </view>
            <view>
                -------
            </view>
            <view class="w-[112rpx] h-[116rpx] flex flex-col items-center justify-center">
                <view class="text-[48rpx] font-[900] text-center font-[D-DIN-PRO-ExtraBold]">02</view>
                <view class="font-[500] text-[28rpx] text-[#000000] text-center">资质认证</view>
            </view>
            <view>
                -------
            </view>
            <view class="w-[112rpx] h-[116rpx] flex flex-col items-center justify-center">
                <view class="text-[48rpx] font-[900] text-center font-[D-DIN-PRO-ExtraBold]">03</view>
                <view class="font-[500] text-[28rpx] text-[#000000] text-center">等待审核</view>
            </view>
        </view>
        
        <!-- 身份证上传（所有类型都需要） -->
        <view class="w-[686rpx] h-[386rpx] bg-[#FFFFFF] mx-[32rpx] mt-[20rpx] rounded-[16rpx] p-[16rpx]">
            <view class="mb-[20rpx]">
                <view class="sh">请上传身份证</view>
                <view class="w-[84rpx] h-[8rpx] bg-[#FFEFB8]"></view>
            </view>
            <view class="flex justify-around">
                <view class="flex-col text-center">
                    <image class="w-[268rpx] h-[172rpx]" 
                        :src="formData.idCardFrontUrl || '/static/images/img/rx.png'" 
                        @click="uploadImage('idCardFrontUrl')"></image>
                    <view>上传人像面</view>
                </view>
                <view class="flex-col text-center">
                    <image class="w-[268rpx] h-[172rpx]" 
                        :src="formData.idCardBackUrl || '/static/images/img/bm.png'" 
                        @click="uploadImage('idCardBackUrl')"></image>
                    <view>上传国徽面</view>
                </view>
            </view>
        </view>

        <!-- 个人认证所需材料 -->
        <view v-if="formData.merchantType == 0">
            <view class="w-[686rpx] h-[286rpx] bg-[#FFFFFF] mx-[32rpx] mt-[20rpx] rounded-[16rpx] p-[16rpx]">
                <view class="mb-[20rpx]">
                    <view class="sh">请上传芝麻信用分</view>
                    <view class="w-[84rpx] h-[8rpx] bg-[#FFEFB8]"></view>
                </view>
                <view>
                    <image class="w-[152rpx] h-[152rpx]" 
                        :src="formData.sesameCreditScore || '/static/images/img/xg.png'" 
                        @click="uploadImage('sesameCreditScore')"></image>
                </view>
            </view>
        </view>

        <!-- 个体认证所需材料 -->
        <view v-if="formData.merchantType == 1">
            <view class="w-[686rpx] h-[286rpx] bg-[#FFFFFF] mx-[32rpx] mt-[20rpx] rounded-[16rpx] p-[16rpx]">
                <view class="mb-[20rpx]">
                    <view class="sh">请上传个体营业执照</view>
                    <view class="w-[84rpx] h-[8rpx] bg-[#FFEFB8]"></view>
                </view>
                <view>
                    <image class="w-[152rpx] h-[152rpx]" 
                        :src="formData.businessLicenseUrl || '/static/images/img/xg.png'" 
                        @click="uploadImage('businessLicenseUrl')"></image>
                </view>
            </view>
            <view class="w-[686rpx] h-[286rpx] bg-[#FFFFFF] mx-[32rpx] mt-[20rpx] rounded-[16rpx] p-[16rpx]">
                <view class="mb-[20rpx]">
                    <view class="sh">请上传芝麻信用分</view>
                    <view class="w-[84rpx] h-[8rpx] bg-[#FFEFB8]"></view>
                </view>
                <view>
                    <image class="w-[152rpx] h-[152rpx]" 
                        :src="formData.sesameCreditScore || '/static/images/img/xg.png'" 
                        @click="uploadImage('sesameCreditScore')"></image>
                </view>
            </view>
        </view>

        <!-- 企业认证所需材料 -->
        <view v-if="formData.merchantType == 2">
            <view class="w-[686rpx] h-[286rpx] bg-[#FFFFFF] mx-[32rpx] mt-[20rpx] rounded-[16rpx] p-[16rpx]">
                <view class="mb-[20rpx]">
                    <view class="sh">请上传企业营业执照</view>
                    <view class="w-[84rpx] h-[8rpx] bg-[#FFEFB8]"></view>
                </view>
                <view>
                    <image class="w-[152rpx] h-[152rpx]" 
                        :src="formData.businessLicenseUrl || '/static/images/img/xg.png'" 
                        @click="uploadImage('businessLicenseUrl')"></image>
                </view>
            </view>
        </view>
        
        <!-- 底部按钮 -->
        <view class="w-[686rpx] h-[88rpx] mx-[32rpx] mt-[60rpx] mb-[40rpx]">
            <up-button @click="nextStep" text="下一步" :customStyle="{
                color: '#FFEFB8',
                padding: '12rpx 74rpx',
                fontWeight: '500',
                borderRadius: '16rpx',
                fontSize: '28rpx',
                lineHeight: '40rpx',
                background: 'linear-gradient( 98deg, #454545 0%, #000000 100%)'
            }"></up-button>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { uploadImage as uploadImageApi } from '@/api/app';
import { getSettled } from '@/api/buser';
import useUserStore from '@/store/modules/user';

const userStore = useUserStore();

const formData = ref({
    shopName: '',
    personName: '',
    regionName: '',
    addressDetail: '',
    merchantType: 0,
    userId: '',
    idCardFrontUrl: '',
    idCardBackUrl: '',
    businessLicenseUrl: '',
    sesameCreditScore: '',
    status: 0 // 0-待审核
});

// 页面参数回显
onLoad((options) => {
    formData.value.shopName = options.shopName || '';
    formData.value.personName = options.personName || '';
    formData.value.regionName = options.regionName || '';
    formData.value.addressDetail = options.addressDetail || '';
    formData.value.merchantType = Number(options.merchantType) || 0;
    formData.value.userId = options.userId || '';
});

// 上传图片
const uploadImage = (type) => {
    uni.chooseImage({
        count: 1,
        sourceType: ['album', 'camera'],
        success: (res) => {
            const tempFilePath = res.tempFilePaths[0];
            uni.showLoading({ title: '上传中...' });
            uploadImageApi(tempFilePath).then(response => {
                uni.hideLoading();
                try {
                    const data = JSON.parse(response.data);
                    if (data.code == 200) {
                        formData.value[type] = data.data;
                        uni.showToast({ title: '上传成功', icon: 'success' });
                    } else {
                        uni.showToast({ title: data.msg || '上传失败', icon: 'none' });
                    }
                } catch (error) {
                    if (response.statusCode == 200) {
                        formData.value[type] = response.data;
                        uni.showToast({ title: '上传成功', icon: 'success' });
                    } else {
                        uni.showToast({ title: '上传失败，返回格式错误', icon: 'none' });
                    }
                }
            }).catch(() => {
                uni.hideLoading();
                uni.showToast({ title: '上传失败', icon: 'none' });
            });
        }
    });
};

// 下一步，提交所有数据
const nextStep = () => {
    // 校验
    if (!formData.value.idCardFrontUrl || !formData.value.idCardBackUrl) {
        uni.showToast({ title: '请上传身份证正反面', icon: 'none' });
        return;
    }
    if (formData.value.merchantType == 0 && !formData.value.sesameCreditScore) {
        uni.showToast({ title: '请上传芝麻信用分', icon: 'none' });
        return;
    }
    if (formData.value.merchantType == 1 && (!formData.value.businessLicenseUrl || !formData.value.sesameCreditScore)) {
        uni.showToast({ title: '请上传营业执照和芝麻信用分', icon: 'none' });
        return;
    }
    if (formData.value.merchantType == 2 && !formData.value.businessLicenseUrl) {
        uni.showToast({ title: '请上传企业营业执照', icon: 'none' });
        return;
    }
    
    formData.value.userId = userStore.userId;
    getSettled({ ...formData.value }).then(res => {
        if (res.code == 200) {
            uni.showToast({ title: '提交成功', icon: 'success' });
            uni.navigateTo({ url: '/pages_qc/audit/audit' });
        } else {
            uni.showToast({ title: res.msg || '提交失败', icon: 'none' });
        }
    });
};
</script>

<style>
.sh {
    height: 48rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 32rpx;
    color: #000000;
    line-height: 48rpx;
    text-align: left;
    font-style: normal;
}
</style>
